<template>
	<view :style="'height:'+(scollH?'':'100%')"> 
		<!-- 头部 -->
		<view class="fixed_top flex" :style="'background:'+(topFixed || topFixed2?'#f57229':'none')">
			<view class="fixed_topFl">
				<text>{{ cityName }}</text>
				<image src="../../static/images/arrow-bottom.png" class="img-xiala" mode="widthFix"></image>
			</view>
			<view class="fixed_topFr" @tap="goUrl($event)" data-url="/pages/index/search" data-url_title="搜索">
				<text class="iconfont icon-sousuo1"></text>
				<lang keywords="搜一搜"></lang> 
			</view> 
		</view>
		<!-- 头部 end -->
		<scroll-view  scroll-y="true" style="height:100%;" >
			<!-- banner -->
			<view style="min-height: 60px" v-if="indexInfo.top_silder" >
				<view class="rel" >
					<swiper class="swiper" indicator-color="#dddddd" indicator-active-color="#ffffff" :indicator-dots="indexInfo.top_silder.length >1?true:false" circular="true" autoplay="true" :style="'height:' + bannerBigH + 'px'" v-if="indexInfo.top_silder && indexInfo.top_silder.length >1">
						<swiper-item v-for="(item, index) in indexInfo.top_silder" :key="index" @tap="goUrlPage(item.url)">
							<image class="slide-image" :src="item.pic" lazy-load="true"></image> 
						</swiper-item>
					</swiper> 
					<!-- <image class="slide-image" :src="item.pic" lazy-load="true" v-else></image> -->
				</view>
			</view>
			<!-- banner end -->
			
			<!-- 导航 -->
			<swiper  class="swiper swiper-type swiper-nav" :indicator-dots="indexInfo.top_menu.length >10?true:false" indicator-color="#eaeaea" indicator-active-color="#FF6000" :style="sliderH"
			 v-if="indexInfo.top_menu"> 
				<swiper-item v-for="(sliderItem, index) in slider" :key="index" >
					<view class="type-list clearfix">
						<view class="item" v-for="item in sliderItem" :key="" @tap="goUrlPage(item.url)">
							<image :src="item.pic" :lazy-load="true" style="width: 49px; height: 49px;"></image>
							<view class="desc">{{ item.name }}</view>  
						</view> 
					</view>
				</swiper-item>
			</swiper>
			<!--  导航 end-->
			
			<!-- 推荐 -->
			<view class="flex hot_RecommendedBox">
				<view class="flex hot_Recommended" style="justify-content:space-between" v-for="item in  indexInfo.middle_adv" :key="" @tap="goUrlPage(item.url)">
					<view style="max-width: 60%;">
						<view class="dd">{{ item.name }}</view>
						<view class="dt">{{ item.sub_name }}</view>
					</view>
					<view class="hot-img"><image :src="item.pic"></image></view> 
				</view> 
			</view>
			<!-- 推荐 end-->
			<view> 
				<view class="flex selectBtArr " style="justify-content:space-around" > 
					<view class="selectArrItem" :class="(filterTag === 'catType' ? 'active' : '')" @click.stop="selectItemClick" data-tag="catType">
						<text>{{ filterParam.cat }}</text> 
						<text :class="'iconfont ' + (mask_show && filterTag === 'catType' ? 'icon-jiantou1' : 'icon-xiala')"></text>
					</view>  
					<view class="selectArrItem" :class="(filterTag === 'areaType' ? 'active' : '')" @click.stop="selectItemClick" data-tag="areaType">
						<text>{{ filterParam.area }}</text>
						<text :class="'iconfont ' + (mask_show && filterTag === 'areaType' ? 'icon-jiantou1' : 'icon-xiala')"></text>
					</view>  
					<!-- <view class="selectArrItem" :class="(filterTag === 'sortType' ? 'active' : '')" @click.stop="selectItemClick" data-tag="sortType">
						<text>{{ filterParam.sort }}</text>
						<text class="iconfont  icon-xiala"></text>
					</view> -->
				</view> 
				<!--  -->
				<view v-if="store_list.length && store_list.length >0">
					<view class="flex pro-block"  v-for="(item,index) in  store_list" :key="index"  @tap="goUrlPage(item.url)">
						<view class="pro-img" >
							<image :src="item.pic_info" mode="aspectFill"></image> 
						</view>
						<view class="pro-text">
							<view class="pro-textH">{{ item.store_name }}</view>
							<view>
								<text class="iconfont icon-star" style="color: #ffc900;"></text>
								<text class="score">{{item.score}}</text> 
							</view>
							<view class="flex" style="justify-content:space-between">
								<text class="pro_type">{{ item.area_name }}</text> 
								<text> {{ item.range_txt }}</text>
							</view>
							<view class="border_b" v-if="item.discount_str">
								<text> {{ item.discount_str }}</text> 
							</view> 
							 
							<view class="info" v-for="(jitem,index) in item.group_list" > 
								<text  class="pin_tuan" v-if="jitem.pin_num > 0">拼</text>
								<text  class="pin_tuan" v-else>团</text>
								<text class="price">￥{{ jitem.price }}</text>
								<text class="price—old">￥{{ jitem.old_price }}</text>
								<text class="detailsInfo">{{ jitem.group_name }}</text>
							</view> 
							 
						</view>
					</view>
				</view>  
				<view v-if='noData' class="no_tips">{{ noDataTip }}</view>
				<!-- <view class="no_tips"  v-else>
					<image src="../../static/mall/no_tip.png"  style="width: 155rpx; height: 128rpx;" ></image>
					<view>暂无商品</view>
				</view> -->
			 </view> 
		</scroll-view>

		<!-- 筛选 -->
		<view class="mask" v-show="mask_show" @tap.stop="isMask_show"> 
			<view :class="'flex selectBtArr ' +(profixTop || profixTop2?'selectBtArrFixed':'') " style="justify-content:space-around" >
				<view class="selectArrItem" :class="(filterTag === 'catType' ? 'active' : '')" @click.stop="selectItemClick" data-tag="catType">
					<text>{{ filterParam.cat }}</text> 
					<text :class="'iconfont ' + (mask_show && filterTag === 'catType' ? 'icon-jiantou1' : 'icon-xiala')"></text>
				</view>  
				<view class="selectArrItem" :class="(filterTag === 'areaType' ? 'active' : '')" @click.stop="selectItemClick" data-tag="areaType">
					<text>{{ filterParam.area }}</text>
					<text :class="'iconfont ' + (mask_show && filterTag === 'areaType' ? 'icon-jiantou1' : 'icon-xiala')"></text>
				</view>   
			</view> 
			
			<view class="mask-content">
				<!--  全部美食-->
				<view class="flex" v-if="filterTag === 'catType'">
					<scroll-view class="nav-box" style="height:270px;" scroll-y="true">
						<view class="nav"> 
							<view class="flex"  :style="'color:'+(category_fir_index == index?'#f57229':'')" v-for="(item,index) in indexInfo.all_category_list"  @click.stop="selectType" :data-index="index" data-name="category_fir_index">
								<text>{{  item.cat_name  }}</text>
								<text class="iconfont icon-jiantou"></text>
							</view> 
						</view>
					</scroll-view>
					<scroll-view class="content-box" style="height:270px;" scroll-y="true">
						<view class="content-class">
							<view  :style="'color:'+(category_sec_index == index?'#f57229':'')"  v-for="(item,index) in indexInfo.all_category_list[category_fir_index].category_list_tmp" @click.stop="selectSecType" :data-index="index" data-name="category_sec_index">
								<text>{{  item.cat_name  }}</text> 
							</view> 
							<view style="color:#f57229"  v-if="!indexInfo.all_category_list[category_fir_index].category_list_tmp">
								<text>全部</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<!--  全部美食 end -->
				<!--  附近-->
				<view class="sortListBox" v-if="filterTag === 'areaType'" > 
				   <view class="flex sortList" :style="'color:'+(areaIndex == index?'#f57229':'')"  v-for="(item,index) in indexInfo.all_area_list" :key="index" @click.stop="selectType" :data-index="index"
					 data-name="areaIndex">  
						 <text :style="'color: ' + ( areaIndex == index ? '#f57229' : '')">{{item.area_name}}</text>
						 <text class="iconfont icon-dui" style="color: #f57229" v-if="areaIndex == index"></text>
				   </view>  
				</view>
				<!-- 附近 end -->
				
				<!--  智能排序-->
				<!-- <view  class="sortListBox"  v-if="filterTag === 'sortType'">  
				  <view class="flex sortList" style="justify-content:space-between" v-for="(item,index) in indexInfo.sort_array" :key="index" @click.stop="selectType(index)" :data-index="index"
					 data-name="sortIndex">
						<text :style="'color: ' + ( sortIndex == index ? '#f57229' : '')">{{ item.sort_value}}</text>
						<text class="iconfont icon-dui" style="color: #f57229" :hidden="sortIndex !== index"></text>
				  </view>   
				</view> -->
				<!-- 智能排序 end -->
				
			</view> 
		</view>
		<!-- 筛选 end --> 
	</view>
</template>

<script>
	import common from "../../utils/common.js" 
	var _this,selectBtArrHd
	var app = getApp()
	var systemInfo = wx.getSystemInfoSync();
	export default{
		data(){
			return{
				bannerBigH:198,
				topFixed:false,
				topFixed2:false,
				category_fir_index:0,
				category_fir_indexSecond:-1,
				profixTop:false,
				profixTop2:false,
				mask_show:false, 
				scollH:true,
				indexInfo:{}, 
				slider:[], 
				sliderH:'',
				filterParam: {
					cat:'',
					// 筛选分类类目
					area: '', 
					// 筛选区域类目
					sort: ''
					// 筛选排序类目  
				},
				category_sec_index:-1,
				sortIndex: 0 ,
				areaIndex:0,
				filterTag:'catType',
				cityName:'',
				store_list:[],
				fliterCat_url:'',
				fliterArea_url:'',
				isHas:true,
				page:1,
				noData:true,
				noDataTip:'',
				long:'',
				lat:'',
			}
		},
		onHide: function () {// 页面隐藏
		},
		onShow: function () {// 页面显示
		},
		onReady: function () {// 页面渲染完成
		},
		onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数
		   _this = this
		   _this.initData();
		   _this.ajaxListData(); 
		   _this.cityName = app.globalData.config.city.area_name 
			_this = this; 
			uni.getLocation({
				type: 'gcj02',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					_this.lat = res.latitude
					_this.long = res.longitude 
					common.changeLocation('getLocation_msg', _this, res.longitude, res.latitude, 'gcj02');
				},
				fail: function(res) {
					console.log('定位失败：', res); 
				}
			});
			
		},
		components: {},
		props: {},
		created() {
			
		},
		mounted(){
		   this.bannerBigH = (systemInfo.windowWidth * 338) / 640;
		   uni.createSelectorQuery().selectViewport().scrollOffset(res => {
		     // console.log("竖直滚动位置" + res.scrollTop);
		   }).exec(); 
		   let view = uni.createSelectorQuery().in(this).select(".selectBtArr"); 
		   view.fields({
		     dataset: true,
		     size: true,
		     rect: true
		   }, data => {
		     // console.log("得到节点信息" + JSON.stringify(data));  
			 selectBtArrHd = data.top 
		     // console.log("节点的宽为" + data.width);
		   }).exec();
		},
		watch:{},
		methods:{
			initData(){   
				common.post('Group&a=index',{}, data => {   
					// console.log(data,'ffff')
					_this.indexInfo = data 
					console.log(app.globalData.city)
					var slider = [];
					var sliderH = 'height:calc(268rpx + 46px);';
					if(data.top_menu){
						var n = parseInt(data.top_menu.length / 10);
						// if(data.top_menu.length <=5){ 
						// 	 _this.swiperNav_indicatorDots = false
						// }
						if (n == 0) {
							slider[0] = data.top_menu.slice(0);
						} else {
							for (var i = 0; i < n; i++) {
								slider[i] = data.top_menu.slice(i * 10, (i + 1) * 10); 
								if (i + 1 == n && n * 10 < data.top_menu.length) {
									slider[n] = data.top_menu.slice(n * 10);
								}
							}
						} 
						
						if (data.top_menu.length == 0) {
							sliderH = 'height:0;padding-top:0;';
						} else if (data.top_menu.length <= 5) {
							sliderH = 'height:calc(154rpx + 17px);';
						} else if (data.top_menu.length <= 10) {
							sliderH = 'height:calc(248rpx + 34px);';
						}
					} 
						
					var scale = systemInfo.windowWidth / 750;
					var width1 = systemInfo.windowWidth - scale * 40;
					var width2 = (width1 - 40 * scale) * 0.3333;
					 
					console.log(sliderH,'sliderH')
					_this.slider =slider
					_this.sliderH =sliderH 
					
					var filterParam = {};  
					filterParam = {
						// cat: data.all_category_list[0].cat_name,
						cat: '全部',
						// 筛选分类类目
						// area: data.all_area_list[0].area_name, 
						area: '附近',
						// 筛选区域类目
						// sort: data.sort_array[0].sort_value
						// 筛选排序类目 
					};
					_this.filterParam = filterParam 
					console.log(_this.filterParam)
				})
				 
			},
			// 列表数据 
			ajaxListData:function(){ 
				var param={
					cat_url:_this.fliterCat_url,
					area_url:_this.fliterArea_url,
					sort_id:'juli',
					lat: _this.lat,
					long: _this.long,  
					page:_this.page
				}  
				common.post('Group&a=ajaxList',param, data => {  
					_this.store_list = _this.store_list.concat(data.store_list)
					if(data.store_list.length<10){
						_this.isHas = false 
						_this.noData = true
						if(_this.store_list.length == 0){
							_this.noDataTip = '暂无数据'
						}else{
							_this.noDataTip = '别拉了，没有啦！' 
						} 
					}  
					if(_this.isHas == true){
						_this.page++
					}
				}) 
			},
			onReachBottom(){
				if(_this.isHas == true){
					_this.ajaxListData() 
				} 
			},
			goUrlPage:function(option){  
				common.parseUrl(option);
			},
			// 页面跳转
			goUrl: function(e) {  
				console.log(e); 
				if (e.type == 'submit') {
					common.upFormid(e);
				}
			
				if (e.currentTarget.dataset.goodsid) {
					// 超值抢购商品点击上报
					goodsReport(e.currentTarget.dataset.goodsid);
				}
			
				var nums = e.currentTarget.dataset.nums;
				var pageTitle = e.currentTarget.dataset.url_title ? e.currentTarget.dataset.url_title : '';
				var url = e.currentTarget.dataset.url;
			
				if (nums) {
					common.post('Login&a=house_adver_click',{adver_id: nums},function(e) {
						common.parseUrl(url, '', false, pageTitle);
					});
				} else if (url.indexOf('/pages') != -1) {
					wx.navigateTo({url})
				} else {
					common.parseUrl(url, '', false, pageTitle);
				}
			
				if (_this.showMore) {
					_this.showMore = false
				}
			},
			onPageScroll:function(e){   
				// console.log(e.scrollTop)
				if(e.scrollTop >10){  
					this.topFixed = true
				}else{ 
					this.topFixed = false
				} 
				 if(e.scrollTop >= selectBtArrHd){ 
					_this.profixTop = true 
				 }else{
					 _this.profixTop = false  
				 }
			}, 
		 
			isMask_show(){
				_this.mask_show = false
				_this.topFixed = false
				_this.profixTop = false 
				_this.scollH = true
				_this.topFixed2 = false
				_this.profixTop2 = false  
			},
			// 筛选菜单显示
			selectItemClick(e) { 
				_this.store_list = []
				_this.page = 0
				_this.scollH = false 
				 
				_this.topFixed2 = true
				_this.profixTop2 = true  
				
				var filterTag = e.currentTarget.dataset.tag; 
				console.log(filterTag,'filterTagfilterTagfilterTag')
				if (filterTag === _this.filterTag && _this.mask_show == true) {
					_this.mask_show = false;
				} else {
					_this.mask_show = true;
				}
				// _this.createSelectorQuery().select('#page-scroll').fields({
				// 	scrollOffset: true
				// }, function(res) {
				// 	if (res) {
				// 		_this.scrollTop = res.scrollTop
				// 	}
				// }).exec();
				// _this.$nextTick(function(){
				// 	if (_this.isNewHeader) {
				// 		_this.scrollTop = _this.filterBox.top - _this.systemInfo.titleH;
				// 	} else {
				// 		_this.scrollTop = _this.filterBox.top - _this.systemInfo.titleBarHeight;
				// 	}
				// }) 
				console.log('999999999999988', _this.scrollTop)
				_this.mask_show = _this.mask_show
				_this.filterTag = filterTag
			},
			// 选择一级菜单
			selectType(e) {    
				var name = e.currentTarget.dataset.name;
				var index = e.currentTarget.dataset.index;   
				console.log(_this.indexInfo,'_this.indexInfo')
				if (name == 'areaIndex') {
					console.log(_this.indexInfo.all_area_list[index])
					_this.filterParam.area = _this.indexInfo.all_area_list[index].area_name;
					_this.fliterArea_url = _this.indexInfo.all_area_list[index].area_url 
					_this.areaIndex = index
					// _this.area_fir_index = index
				}   
				  
				if (name != 'category_fir_index') {  
					_this.mask_show = false 
					_this.ajaxListData();
				}else{
					_this.category_fir_index = index 
				} 
			}, 
			// 选择二级菜单
			selectSecType(e) {   
				var index = e.currentTarget.dataset.index;
				var list = _this.indexInfo.all_category_list[_this.category_fir_index].category_list_tmp;   
				_this.topFixed = false
				_this.profixTop = false 
				_this.topFixed2 = false
				_this.profixTop2 = false   
			 
				if (list) { 
					// _this.adInfo.category_list[_this.category_fir_index_old].son_list[_this.category_sec_index].active = false
					// _this.adInfo.category_list[_this.category_fir_index].son_list[index].active = true
					
					_this.filterParam.cat = list[index].cat_name;
					_this.fliterCat_url = list[index].cat_url
					// _this.pageIndex = 1;
					// _this.reachBottom = false;  
					_this.category_sec_index = index 
					// _this.category_fir_index_old = _this.category_fir_index  
			
					_this.ajaxListData();
					_this.mask_show = false 
					console.log('选中二级分类', _this.category_fir_index)
				}
			},
		}
	}
	
</script>

<style>
	.color9{
		color: #999;
	}
	.slide-image{
		width: 100%;
	}
	.fixed_top{
		width: 100%;
		position: fixed;
		left: 0;
		top:0;
		padding: 10px;
		z-index: 999; 
	}
	.flex{
	  box-sizing: border-box;
	  display: flex;
	  flex-direction: row;
	  flex-wrap: nowrap
	}
	.fixed_topFl{
	  width: 60px;
	  line-height: 28px;
	  color: #fff;
	}
	.fixed_topFr{
		width: 75%; 
		background: rgba(255,255,255,0.6);
		border: 1px solid #fff;
		height: 28px;
		line-height: 28px;
		border-radius: 20px;
		color: #fff;
		padding-left: 10px;
	}
	.fixed_topFl .img-xiala{
		width: 12px;
		height: 5px;
		margin-left: 5px;
		margin-top: 5px;
	}
	.swiper-nav{
		background: #fff;
		padding: 20px 10px 10px 10px; 
	}
	.type-list .item{
	    width: 20%;
	    float: left;
	    text-align: center;
	    padding-bottom: 11px;
	    position: relative;
	    margin-top: 5px;
	}
	.type-list .item .desc{
		word-break:keep-all;/* 不换行 */
		white-space:nowrap;/* 不换行 */
		overflow:hidden;
		text-overflow:ellipsis;
		font-size: 14px;
	}
	.swiper-nav .uni-swiper-dots .uni-swiper-dot{
		width: 20px!important;
		height: 4px;
	}
	.hot_RecommendedBox{ 
		width: 100%;
		margin: 10px 0;
	}
	.hot_Recommended{
		width: 50%;
		padding: 20px;
		box-sizing: border-box;
		background: #fff;
		position: relative;
		font-size: 12px; 
	}
	.hot_Recommended .dd{
		font-size: 16px;
		color: #000;
		font-weight: bold; 
		overflow: hidden;
		white-space:nowrap; 
		text-overflow:ellipsis
	}
	.hot_Recommended .dt{
		color: #ec6739;
		margin-top: 10px; 
		overflow: hidden;
		white-space:nowrap; 
		text-overflow:ellipsis
	}
	.hot_Recommended .hot-img{
		width: 50px;
	}
	.hot_Recommended .hot-img image{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	.hot_RecommendedBox .hot_Recommended:nth-child(2)::after{
		position: absolute;
		content: '';
		left: 0;
		top:20px;
		width: 1px;
		height: 60px;
		background: #eee;
	}
	.selectBtArr{
		padding: 10px;
		background: #fff;
		margin: 10px 0;
	}
	.selectBtArr.selectBtArrFixed{
		position: fixed;
		left: 0;
		top:40px;
		width: 100%;
		z-index: 9999;
	}
	.selectBtArr .selectArrItem{
		font-size: 14px;
		color: #999;
	}
	.selectBtArr .selectArrItem.active{ 
		color: #000;
		font-weight: bold;
	}
	.pro-block{
		padding: 10px;
		background: #fff;
	}
	.pro-block .pro-img{
		margin-right: 15px;
	}
	.pro-block .pro-img,.pro-block .pro-img image{
		width: 85px;
		height: 60px;
		position: relative;
	}
	.pro-block .pro-img .renzhengEd{
		position: absolute;
		right: 0;
		top: 0;
		background: #ffce59;
		color: #ec6739;
		font-size: 10px;
		padding: 0 2px;
		font-weight: 700;
	}
	.pro-block .pro-textH{
		font-size: 15px;
		padding-bottom: 5px;
		font-weight: 700;
	}
	.pro-block .pro-text{
		width: 100%;
	}
	.pro-block .pro-text .border_b text{
		color:#ec6739;
		background: #faf2ef;
		font-size: 12px;
		margin:5px 10px 0px 0;
		padding: 2px 4px;
		border: 1px solid #fddcca;
		display: inline-block;
	}
	.pro-block .pro-text  .info{
		font-size: 13px;
		color: #999;
		margin-top: 10px;
	}
	.pro-block .pro-text  .info .price-old{
		margin-right: 10px;
		text-decoration: line-through;
	}
	.pro-block .pro-text .pro_type{
		color:#999;
		font-size: 13px;
	}
	.mask{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background: rgba(0,0,0,0.6);
		height: 100%;
		width: 100%;
	}
	.mask-content{
		background: #fff;
		height: 270px;
		margin-top: 85px;
		font-size: 14px;
		padding-top: 10px;
	}
	.nav-box{
		width: 35%;
		padding: 0 15px;
		box-sizing: border-box; 
	}
	.nav-box .nav,.content-class{
		 line-height: 32px;
		 height: 32px;
	}
	.content-box{
		width: 65%;
		background: #f1f5f5; 
		padding: 0 20px;
		box-sizing: border-box; 
	}
	.sortListBox{
		/* padding-top: 50px; */
		height: 270px;
		overflow-y: scroll;
	}
	.sortList{
		padding: 10px;
		justify-content: space-between
	}
	.no_tips{
		text-align: center; 
		display: block; 
		margin: 30px auto;
		color: #666;
	}  
	.pin_tuan{
		color: #fff;
		background: #ec6739;
		padding: 2px;
	}
</style> 